@import 'colorsRoot';

.products {
    padding: 120px 0;
    background-color: @backgroundPink;

    .container {
        .products-title {
            font-family: Tavolgafree, sans-serif;
            font-size: 45px;
            font-weight: 100;
            color: @textWhite;
            text-align: center;
            padding-bottom: 142px;
        }

        .products-list {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            list-style-type: none;
            justify-items: center;

            .product-item {
                display: grid;
                grid-template-rows: repeat(2, 1fr);
                width: 263px;
                height: 229px;
                border: 2px solid @textWhite;
                border-radius: 20px;
                box-sizing: border-box;
                padding: 20px;

                &:hover img {
                    transform: scale(1.1);
                }

                .product-item-image {
                    position: relative;
                    transition: all .4s;

                    img {
                        position: absolute;
                        left: calc(50% - 96px);
                        bottom: 50px;
                        transition: all .4s;
                    }
                }

                .product-item-action {
                    display: grid;
                    grid-template-columns: 40% 60%;
                    grid-template-rows: repeat(3, minmax(min-content, max-content));

                    .product-item-title {
                        grid-column: 1 / 3;
                        justify-self: center;
                        font-family: Tavolgafree, sans-serif;
                        font-size: 18px;
                        color: @textWhite;
                        padding-bottom: 26px;
                    }

                    .product-item-count {
                        font-family: GilroyRegular, sans-serif;
                        font-size: 15px;
                        color: @textWhite;
                        align-self: end;
                        padding-bottom: 7px;
                    }

                    .product-item-price {
                        grid-column: 1 / 2;
                        font-family: GilroyRegular, sans-serif;
                        font-size: 15px;
                        color: @textWhite;
                        align-self: start;
                        padding-top: 7px;
                    }

                    .product-item-btn {
                        grid-column: 2 / 3;
                        grid-row: 2 / 4;
                        align-self: center;
                        width: 130px;
                        height: 50px;
                        background-color: #f3a600;
                        background-image: linear-gradient(0.0deg, #71081e 0%, #d7485c 100%);
                        border-radius: 25px;
                    }
                }
            }
        }
    }
}